<template>
  <a-modal class="staffInfo_modal" v-model="visible" :title="title" :confirmLoading="submitLoading" width="900px"
    ok-text="确认" cancel-text="取消" @ok="addFormSubmit">
    <a-form :form="events_form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="企业选择" v-if="userInfo.type == 4">
        <a-select v-model="enterpriseId" @change="enterpriseChange" placeholder="选择企业" style="width: 500px;">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId" :name="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="订单服务商">
        <a-select placeholder="请选择订单服务商" v-decorator="['parkId', { rules: [{ required: true, message: '请选择订单服务商!' }] }]" style="width: 500px;">
          <a-select-option v-for="item in orderBusinessList" :key="item.parkId">
            {{ item.parkName }}
          </a-select-option>
        </a-select>
      </a-form-item>
			<a-form-item label="是否线下订单">
			  <a-radio-group v-decorator="['isOnline', { rules: [{ required: true, message: '请选择' }], initialValue: '1'  }]">
			    <a-radio value="1">
			      是
			    </a-radio>
			    <a-radio value="2">
			      否
			    </a-radio>
			  </a-radio-group>
			</a-form-item>
      <a-form-item label="账户选择">
        <a-select :disabled="events_form.getFieldsValue().isOnline == 1" placeholder="请选择账号" v-decorator="['payAccountNo']" style="width: 500px;">
          <a-select-option v-for="item in accountList" :key="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="订单名称">
        <a-input placeholder="请输入订单名称" v-decorator="['orderName', { rules: [{ required: true, message: '请输入订单名称' }] }]" style="width: 500px;"/>
      </a-form-item>
      <a-form-item label="订单周期">
        <a-month-picker valueFormat="YYYY-MM" v-decorator="['period', { rules: [{ required: true, message: '请选择月份' }] }]"></a-month-picker>
      </a-form-item>
      <a-form-item label="合作类型">
        <a-select @change="cooperateChange" placeholder="请选择合作类型" v-decorator="['bizId', { rules: [{ required: true, message: '请选择合作类型!' }]}]" style="width: 500px;">
          <a-select-option v-for="item in cooperateList" :key="item.bizId" :feeWay="item.feeWay" :feeValue="item.feeValue" :cooperationName="item.cooperationName">
            {{ item.cooperationName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="服务费计算方式">
        <div v-if="feeWay == 1">按人数</div>
        <div v-else-if="feeWay == 2">按系数</div>
      </a-form-item>
      <a-form-item label="服务费">
        <div v-if="feeWay == 1">{{ feeValue }} 元</div>
        <div v-else-if="feeWay == 2">{{ feeValue }} %</div>
      </a-form-item>
      <a-form-item label="是否委托供应商">
        <a-radio-group v-decorator="['isEntrust', { rules: [{ required: true, message: '请选择' }], initialValue: '1'  }]">
          <a-radio value="1">
            是
          </a-radio>
          <a-radio value="2">
            否
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="是否已计税">
        <a-radio-group v-decorator="['isTaxAssessment', { rules: [{ required: true, message: '请选择' }], initialValue: '1'  }]">
          <a-radio value="1">
            是
          </a-radio>
          <a-radio value="2">
            否
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {
  queryParkListByEnterpriseId,
  queryAccountByParkId,
  queryCooperateList,
  createOrder
} from "@/api/human/salaryPaySendSalary"
import store from '@/store'
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'AddInfo',
  data() {
    return {
      title: "",
      visible: false,
      configType: "1",
      configTitle: "用于姓名、公司名称等文字信息的输入",
      contentDate: "", // 日期格式内容
      submitLoading: false,

      id: "",
      enterpriseId: "", // 企业id
      enterpriseData: [],

      orderBusinessList: [], // 订单服务商
      accountList: [], // 账户选择
      cooperateList: [], // 服务类型
      feeWay: "",
      feeValue: "",
      bizTypeTag: "",
    }
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    });
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开编辑弹窗 
    add(enterpriseId) {
      this.title = '创建订单';
      this.visible = true;
      this.$nextTick(() => {
        this.feeWay = "";
        this.feeValue = "";
        this.events_form.resetFields();
      })
      if (this.userInfo.type == 4) {
        // hr管理端
        this.getEnterpriseData(enterpriseId);
      } else if (this.userInfo.type == 5) {
        // hr企业端
        this.enterpriseId = enterpriseId;
        this.getOrderBusiness();
        this.getAccount();
        this.getCooperate();
      }
    },
    // 获取客户员工
    async getEnterpriseData(id) {
      this.enterpriseData = await store.dispatch('department/getAllEnterprise');
      if (id) {
        this.enterpriseId = id;
      } else {
        this.enterpriseId = this.enterpriseData[0].enterpriseId;
      }
      this.getOrderBusiness();
      this.getAccount();
      this.getCooperate();
    },
    // 选择客户
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.getOrderBusiness();
      this.getAccount();
      this.getCooperate();
    },
    // 获取订单服务商
    async getOrderBusiness () {
      const { code,data } = await queryParkListByEnterpriseId(this.enterpriseId);
      if (code === '1') {
        this.orderBusinessList = data
      }
    },
    // 查询账户
    async getAccount () {
      const { code,data } = await queryAccountByParkId(this.enterpriseId);
      if (code === '1') {
        this.accountList = data
      }
    },
    // 获取业务类型
    async getCooperate () {
      const { code,data } = await queryCooperateList(this.enterpriseId);
      if (code === '1') {
        this.cooperateList = data
      }
    },
    // 类型选择
    cooperateChange(value, option) {
      this.feeWay = option.data.attrs.feeWay
      this.feeValue = option.data.attrs.feeValue
      this.bizTypeTag = option.data.attrs.cooperationName
    },
    // 提交
    async addFormSubmit() {
      this.events_form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          if (this.enterpriseId) {
            values.enterpriseId = this.enterpriseId;
          }
					if (values.isOnline == '2') {
					  valus.payAccountNo = undefined;
					}
          this.submitLoading = true;
          const { code } = await createOrder(values);
          this.submitLoading = false;
          if (code === '1') {
            this.visible = false;
            this.$message.success('操作成功');
            this.$emit('on-ok');
          }
        }
      });
    }
  }
}
</script>
<style lang="less">
.staffInfo_modal {

  .ant-page-header-heading-title {
    font-size: 18px;
  }

}
</style>
